<template>
  <yd-layout class="m-register">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="注册" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
      <yd-navbar-back-icon slot="left" color="#666" @click.native="$router.back()"></yd-navbar-back-icon>
      <router-link slot="right" to="/login">登录</router-link>
    </yd-navbar>

    <div class="m-register-ct">
      <div class="logo"></div>
      <p class="send">短信验证码已发送到：{{userName}}</p>

      <div class="register-bd">
        <yd-cell-group>
          <yd-cell-item>
            <input type="text" v-model="code" ref="codeInput" slot="right" placeholder="请输入短信验证码" maxlength="6">
            <yd-sendcode slot="right" 
              id="regCodeBtn"
              v-model="timer"
              initStr="获取验证码"
              @click.native="onSendCode" 
              type="warning">
            </yd-sendcode>
          </yd-cell-item>

          <yd-cell-item>
            <yd-input slot="right"
              type="password" 
              v-model="password" 
              placeholder="6到16位字母或数字组合密码"
              :required="true"
              regex="^\w{6,16}$"
              ref="nextInput"
              :max="16"
              :showClearIcon="false"
              :showErrorIcon="false"
              :showSuccessIcon="false"
              :showRequiredIcon="false">
            </yd-input>
          </yd-cell-item>
        </yd-cell-group>

        <yd-button size="large" @click.native="onSubmit">注册</yd-button>
      </div>
    </div>
  </yd-layout>
</template>

<script>
  import { session } from 'util/storage'
  import { apiSendCode, apiRegister } from 'js/api'
  import Md5 from 'js-md5'

  export default {
    data() {
      return {
        userName: '',
        password: '',
        code: '',
        timer: false
      }
    },
    created() {
      this.userName = session.get('userName')
    },
    mounted() {
      document.getElementById('regCodeBtn').click()
    },
    methods: {
      onSendCode() {
        apiSendCode(this.userName).then(data => {
          this.$toast('验证码发送成功', () => {
            this.timer = true
          })
        })
      },
      onSubmit() {
        const oInput = this.$refs.nextInput
        // 判断验证码是否输入
        if (!this.code) {
          this.$toast('不能为空', () => {
            this.$refs.codeInput.focus()
          })
          return
        }
        // 判断密码输入
        if (oInput.errorMsg) {
          this.$toast(oInput.errorMsg, () => {
            oInput.$el.children[0].focus()
          })
          return
        }
        // 验证通过，开始注册
        apiRegister(this.userName, Md5(this.password), this.code).then(data => {
          this.$toast('注册成功', () => {
            this.$router.replace('/login')
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  .m-register {
    a {
      font-size: .26rem;
      color: #666;
    }
  }
  .m-register-ct {
    height: 100%;
    padding-top: .9rem;
    background: #fff;
    .logo {
      height: 1rem;
      margin-bottom: 1.1rem;
      // background: url(../../assets/logo.png) no-repeat center center;
      background-size: 2.6rem 100%;
    }
    .send {
      padding-bottom: .4rem;
      text-align: center;
      font-size: .3rem;
      color: #666;
      font-weight: 600;
    }
    .register-bd {
      padding: 0 .8rem;
    }
  }
</style>